<template>
  <div class="dashboard">
    <!-- 统计面板 -->
    <div class="stats-panel">
      <div class="stat-box">
        <div class="stat-value">¥{{ todaySales.toLocaleString() }}</div>
        <div class="stat-label">今日销售额</div>
      </div>
      <div class="stat-box">
        <div class="stat-value">{{ totalDrugs.toLocaleString() }}</div>
        <div class="stat-label">药品总数</div>
      </div>
      <div class="stat-box">
        <div class="stat-value">{{ lowStockAlerts }}</div>
        <div class="stat-label">库存预警</div>
      </div>
      <div class="stat-box">
        <div class="stat-value">{{ todayTransactions }}</div>
        <div class="stat-label">今日销量</div>
      </div>
    </div>

    <!-- 库存预警列表 -->
    <h4 class="section-title">库存预警列表</h4>
    <table class="data-table">
      <thead>
        <tr>
          <th width="30">状态</th>
          <th width="120">药品名称</th>
          <th width="80">规格</th>
          <th width="60">当前库存</th>
          <th width="60">安全库存</th>
          <th width="80">有效期</th>
          <th width="60">预警类型</th>
          <th width="80">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="alert in stockAlerts" :key="alert.id">
          <td>
            <span 
              class="status-indicator" 
              :class="`status-${alert.status}`"
            ></span>
          </td>
          <td>
            {{ alert.drugName }}
            <span 
              class="drug-type" 
              :class="alert.type"
            >
              {{ alert.typeLabel }}
            </span>
          </td>
          <td>{{ alert.specification }}</td>
          <td :style="{ color: alert.currentStock < alert.safeStock ? '#e74c3c' : '#333', fontWeight: alert.currentStock < alert.safeStock ? 'bold' : 'normal' }">
            {{ alert.currentStock }}
          </td>
          <td>{{ alert.safeStock }}</td>
          <td :style="{ color: alert.isExpiringSoon ? '#f39c12' : '#333', fontWeight: alert.isExpiringSoon ? 'bold' : 'normal' }">
            {{ alert.expiryDate }}
          </td>
          <td>{{ alert.alertType }}</td>
          <td>
            <button class="action-btn" @click="quickOrder(alert.id)">快速订货</button>
            <button class="action-btn" @click="viewDetails(alert.id)">详情</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 今日销售记录 -->
    <h4 class="section-title">今日销售记录</h4>
    <table class="data-table">
      <thead>
        <tr>
          <th width="80">时间</th>
          <th width="120">药品名称</th>
          <th width="40">数量</th>
          <th width="60">单价</th>
          <th width="60">金额</th>
          <th width="80">操作员</th>
          <th width="60">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="sale in todaySalesRecords" :key="sale.id">
          <td>{{ sale.time }}</td>
          <td>{{ sale.drugName }}</td>
          <td>{{ sale.quantity }}</td>
          <td>¥{{ sale.unitPrice.toFixed(2) }}</td>
          <td>¥{{ sale.amount.toFixed(2) }}</td>
          <td>{{ sale.operator }}</td>
          <td>
            <button class="action-btn" @click="viewSaleDetail(sale.id)">详情</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 定义数据类型
interface StockAlert {
  id: string
  drugName: string
  specification: string
  currentStock: number
  safeStock: number
  expiryDate: string
  alertType: string
  status: 'normal' | 'warning' | 'danger'
  type: 'prescription' | 'otc' | 'supplement'
  typeLabel: string
  isExpiringSoon: boolean
}

interface SalesRecord {
  id: string
  time: string
  drugName: string
  quantity: number
  unitPrice: number
  amount: number
  operator: string
}

// 响应式数据
const todaySales = ref(15680)
const totalDrugs = ref(1247)
const lowStockAlerts = ref(28)
const todayTransactions = ref(156)

const stockAlerts = ref<StockAlert[]>([
  {
    id: 'A001',
    drugName: '阿莫西林胶囊',
    specification: '0.25g×24粒',
    currentStock: 15,
    safeStock: 50,
    expiryDate: '2025-06-15',
    alertType: '库存不足',
    status: 'danger',
    type: 'prescription',
    typeLabel: '处方',
    isExpiringSoon: false
  },
  {
    id: 'A002',
    drugName: '感冒灵颗粒',
    specification: '10g×9袋',
    currentStock: 45,
    safeStock: 30,
    expiryDate: '2024-02-01',
    alertType: '即将过期',
    status: 'warning',
    type: 'otc',
    typeLabel: 'OTC',
    isExpiringSoon: true
  },
  {
    id: 'A003',
    drugName: '维生素B复合片',
    specification: '100片/瓶',
    currentStock: 8,
    safeStock: 30,
    expiryDate: '2025-03-20',
    alertType: '库存不足',
    status: 'danger',
    type: 'supplement',
    typeLabel: '保健品',
    isExpiringSoon: false
  }
])

const todaySalesRecords = ref<SalesRecord[]>([
  {
    id: 'S001',
    time: '14:25',
    drugName: '布洛芬片',
    quantity: 2,
    unitPrice: 15.60,
    amount: 31.20,
    operator: '张医生'
  },
  {
    id: 'S002',
    time: '14:18',
    drugName: '复方甘草片',
    quantity: 1,
    unitPrice: 8.50,
    amount: 8.50,
    operator: '李护士'
  },
  {
    id: 'S003',
    time: '14:10',
    drugName: '阿莫西林胶囊',
    quantity: 3,
    unitPrice: 18.50,
    amount: 55.50,
    operator: '张医生'
  }
])

// 方法
const quickOrder = (alertId: string) => {
  alert(`快速订货: ${alertId}`)
}

const viewDetails = (alertId: string) => {
  alert(`查看详情: ${alertId}`)
}

const viewSaleDetail = (saleId: string) => {
  alert(`查看销售详情: ${saleId}`)
}

// 模拟数据更新
onMounted(() => {
  setInterval(() => {
    todaySales.value += Math.floor(Math.random() * 100)
    todayTransactions.value += Math.floor(Math.random() * 3)
  }, 10000)
})
</script>

<style scoped>
.dashboard {
  font-size: 12px;
}

/* 统计面板 */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.stat-box {
  background: white;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

/* 章节标题 */
.section-title {
  margin: 15px 0 8px 0;
  font-size: 13px;
  color: #333;
  font-weight: bold;
}

/* 表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 12px;
  margin-bottom: 10px;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

/* 状态指示器 */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-normal { 
  background: #27ae60; 
}

.status-warning { 
  background: #f39c12; 
}

.status-danger { 
  background: #e74c3c; 
}

/* 药品类型标签 */
.drug-type {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: bold;
  margin-left: 5px;
}

.drug-type.prescription {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
}

.drug-type.otc {
  background: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.drug-type.supplement {
  background: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

/* 操作按钮 */
.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #2980b9;
}

/* 响应式 */
@media (max-width: 768px) {
  .stats-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 